<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';
import { NDataTable } from 'naive-ui';
import type { DataTableColumn, PaginationProps } from 'naive-ui';
import type { FormProps } from '@/components/form/props';

// 表单配置类型定

// 自定义属性：只声明我们需要的自定义配置
const props = defineProps<{
  // 表格列配置（必传）
  columns: (DataTableColumn<any> & { title: string; key: string })[];
  // 本地数据（优先使用）
  data?: any[];
  // 数据获取 API（data 为空时使用）
  api?: (params: Api.Common.CommonSearchParams) => Promise<any>;
  tableTitle?: string;
  useForm?: boolean;
  // 分页配置（覆盖默认）
  pagination?: PaginationProps;
  // API 请求额外参数
  queryParams?: Record<string, any>;
  // 新增：表单配置（可选）
  formConfig?: FormProps; // 表单配置，传入则显示表单
  // 透传原生表格的其他所有属性（通过 ...rest 接收）
  [key: string]: any; // 关键：用索引签名接收所有原生属性
}>();

const emit = defineEmits<{
  (e: 'loadSuccess', data: any[]): void;
  (e: 'loadError', error: Error): void;
  (e: 'batchDelete', params: any[]): void;
  (e: 'add'): void;
  // 透传原生事件
  // 收紧泛型，避免与已有事件冲突
  // (e: Exclude<string, 'loadSuccess' | 'loadError' | 'batchDelete' | 'add'>, ...args: any[]): void;
}>();

// 内部状态
const columns = ref<NaiveUI.TableColumnCheck[]>([
  ...props.columns.map(item => {
    const { title, key, ...rest } = item;
    return {
      title,
      key,
      ...rest,
      checked: true
    };
  })
]);
const { page: p, pageSize: size, ...paginationProps } = props.pagination || {};
const page = ref(p || 1);
const pageSize = ref(size || 10);
const tableData = ref<any[]>([]);
const total = ref(0);
const loading = ref(false);
const expandedNames = ref(['1']);
const collapseTitle = ref('收起');
const { tableTitle = '用户列表', useForm, formConfig, ...resProps } = props;
const formQuery = ref<Record<string, any>>({}); // 表单查询参数（用于筛选）

// 分页配置
const paginationConfig = reactive<PaginationProps>({
  page: page.value,
  pageSize: pageSize.value,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100],
  showQuickJumper: true,
  prefix: ({ itemCount }) => `共 ${itemCount} 条`,
  ...paginationProps, // 覆盖用户传入的分页配置
  itemCount: 0
});

// 数据加载核心函数（整合表单参数、分页参数）
const fetchTableData = async (pageFetch = 1, pageSizeFetch = 10) => {
  if (!props.api && !props.data) return;

  loading.value = true;
  try {
    // 合并所有查询参数：表单参数 + 分页参数 + 外部queryParams
    const rawParams: Api.Common.CommonSearchParams & Record<string, any> = {
      current: pageFetch,
      size: pageSizeFetch,
      ...props.queryParams, // 外部默认参数
      ...formQuery.value // 表单筛选参数（优先级最高）
    };
    const params = Object.fromEntries(
      Object.entries(rawParams).filter(([_, value]) => {
        // 排除 undefined、null、空字符串、空数组等空值
        return value !== undefined && value !== null && value !== '' && !(Array.isArray(value) && value.length === 0);
      })
    );
    if (props.data && props.data.length > 0) {
      // 本地数据模式：根据参数筛选
      let filteredData = [...props.data];
      // 遍历参数，筛选本地数据
      Object.entries(params).forEach(([key, value]) => {
        if (value !== undefined && key !== 'current' && key !== 'size') {
          filteredData = filteredData.filter(item =>
            String(item[key]).toLowerCase().includes(String(value).toLowerCase())
          );
        }
      });
      // 本地分页
      tableData.value = filteredData.slice((pageFetch - 1) * pageSizeFetch, pageFetch * pageSizeFetch);
      paginationConfig.itemCount = filteredData.length;
    } else if (props.api) {
      // API模式：传递参数请求数据
      const { data, error } = await props.api!(params as Api.Common.CommonSearchParams);
      if (error) {
        tableData.value = [];
        paginationConfig.itemCount = 0;
        return;
      }
      tableData.value = data.records || [];
      paginationConfig.pageCount = Math.ceil(data.total / pageSizeFetch);
      paginationConfig.itemCount = data.total || 0;
    }
    emit('loadSuccess', tableData.value);
  } catch (error) {
    emit('loadError', error as Error);
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 表单提交：更新查询参数并刷新数据
function handleFormSubmit(formValue: Record<string, any>) {
  // 保存表单参数（用于筛选）
  formQuery.value = formValue;
  // // 重置页码为1，重新加载数据
  page.value = 1;
  fetchTableData(1, paginationConfig.pageSize as number);
}

// 表单重置：清空查询参数并刷新数据
function handleFormReset() {
  formQuery.value = {};
  // paginationConfig.value.page = 1;
  page.value = 1;
  fetchTableData(1, paginationConfig.pageSize as number);
}

function handleExpanded(names: string[]) {
  collapseTitle.value = names.length > 0 ? '收起' : '展开';
}

// 数据来源切换逻辑
watch(
  () => [props.data, props.api, props.queryParams],
  () => {
    if (props.data && props.data.length > 0) {
      tableData.value = props.data;
      total.value = props.data.length;
    } else {
      fetchTableData(paginationConfig.page as number, paginationConfig.pageSize as number);
    }
  },
  { immediate: true, deep: true }
);

const getColumns = computed(() => {
  const arr = columns.value as (DataTableColumn<any> & { checked: boolean })[];
  return arr.filter(item => item.checked);
});

// 合并所有需要传递给原生表格的属性
const allProps = computed(() => ({
  // 透传用户传入的所有原生属性（如 rowKey、maxHeight 等）
  ...resProps,
  // 覆盖 data 和 pagination（使用我们内部的）
  // pagination: paginationConfig.value,
  // 确保 columns 从 props 传入
  columns: getColumns.value
}));

function handlePageChange(params: number) {
  paginationConfig.page = params || 1;
  fetchTableData(params, paginationConfig.pageSize);
}

function handlePageSizeChange(params: number) {
  paginationConfig.pageSize = params || 10;
  fetchTableData(paginationConfig.page, paginationConfig.pageSize);
}

// 更新列表
function updateList() {
  fetchTableData(paginationConfig.page, paginationConfig.pageSize);
}

// 新增
function handleAdd() {
  emit('add');
}

// 删除
function handleDelete() {
  emit('batchDelete', [12, 13]);
}

defineExpose({
  updateList
});
</script>

<template>
  <div>
    <NCard v-if="useForm" size="small" class="mb-4">
      <NCollapse v-model="expandedNames" :default-expanded-names="['1']" @update:expanded-names="handleExpanded">
        <NCollapseItem :title="collapseTitle" name="1">
          <Form v-bind="formConfig" :loading="loading" @submit="handleFormSubmit" @reset="handleFormReset" />
        </NCollapseItem>
      </NCollapse>
    </NCard>
    <NCard :title="tableTitle" size="small">
      <template #header-extra>
        <TableHeaderOperation v-model:columns="columns" @add="handleAdd" @refresh="updateList" @delete="handleDelete" />
      </template>
      <!-- <NDataTable v-bind="rest" :pagination="pagination" /> -->
      <!-- 加载状态 -->
      <!-- <NLoadingBar v-if="loading" :active="loading" :height="4" /> -->

      <!-- 原生表格组件，透传所有属性和事件 -->
      <NDataTable
        :remote="allProps.api ? true : false"
        v-bind="allProps"
        :data="tableData"
        :loading="loading"
        :pagination="paginationConfig"
        v-on="$attrs"
        @update:page="handlePageChange"
        @update:page-size="handlePageSizeChange"
      />
    </NCard>
  </div>
</template>

<style lang="scss" scoped></style>
